<template>
	<view class="container">
		<view class="card-box">
			<view class="card-box-head u-flex u-col-center">
				<text class="shop-name">充值金额(元)</text>
				<text class="order-status">账户余额：{{userInfo.wallet}}元</text>
			</view>
			<view class="card-box-body card-box-body-cloumn">
				<input type="digit" v-model="model.money" placeholder="0.00" />
			</view>
			<view class="t-flex card-box-footer u-flex u-col-center">
				<view class="t-flex footer-status">
					<view class="footer-status-view">
						注：<text style="color: #666;" class="footer-status-text"></text>
					</view>
					<view class="footer-status-view">
						1：<text style="color: #666;" class="footer-status-text">充值成功后，充值金额会立即在越重显示</text>
					</view>
					<view class="footer-status-view">
						2：<text style="color: #666;" class="footer-status-text">账户余额可在发布品鉴商品时使用</text>
					</view>
					<view class="footer-status-view">
						3：<text style="color: #666;"
							class="footer-status-text">管雇主为降低成本耍些像暂停为你的401（k）帐户充值这样的小花招，为雇主工作还是有些安全保证的。</text>
					</view>
				</view>
			</view>
		</view>
		<view class="sub">
			<button :loading="requestIng" :disabled="requestIng" @tap.stop="recharge">立即充值</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				model: {
					money: null
				},
				requestIng: false,
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad() {
			console.log(this.$store)

		},
		methods: {
			recharge() {
				let that = this;
				!that.requestIng && that.model.money > 0 && ((that.$util.loading('提交中'), that.requestIng = true),
					that.$http('money.recharge', that.model).then(res => {
						console.log('充值返回值', res)
						that.requestIng = false
						uni.hideLoading()
						let data = res.data
						if (res.code == 1 && data != null) {
							uni.showToast({
								title: "调起支付中...",
								icon: "loading",
								duration: 1000
							});
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: data.timeStamp,
								nonceStr: data.nonceStr,
								package: data.package,
								signType: data.signType,
								paySign: data.paySign,
								success: res => {
									console.log('支付成功',res)
									that.$util.msg('支付成功');
									that.$store.dispatch('getUserInfo');
									that.$util.jump('/pages/user/user', 'switchTab')
								},
								fail: function(err) {
									console.log('fail:', err);
									if (err.errMsg == 'requestPayment:fail cancel') {
										//取消支付
										that.$util.msg('取消支付');
									} else {
										that.$util.msg('支付失败');
									}
								}
							})
						} else {
							that.$util.msg(res.msg || '充值失败');
							resolve(false);
						}
					})
					.catch(err => {
						that.requestIng = false
						uni.hideLoading()
						that.$util.msg('网络异常');
					}))
			},
		}
	}
</script>

<style lang="scss">
	.t-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.t-flex-col {
		@extend .t-flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	.container {
		.box-list {
			margin: 130rpx 0 0;
		}

		.card-box {
			width: 94%;
			min-height: 100rpx;
			margin: 30rpx 3%;
			padding: 50rpx 0;
			background: #FFF;
			background-size: 100% 100%;
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(213, 175, 97, 0.34);
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			// z-index: 810;


			&-head,
			.card-box-footer {
				color: #000;
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
				width: 94%;
				margin-left: 3%;
				// height: 50rpx;
				align-items: center;
			}

			.shop-name,
			.order-status {
				font-size: 24rpx;
				font-weight: 400;
			}

			.order-status {
				color: #ff9000;
			}

			&-body {
				width: 94%;
				margin: 40rpx 3%;
				display: flex;
				align-items: center;
				height: 100rpx;
				border-bottom: 1px solid #eee;

				input {
					height: 100%;
					width: 100%;
					font-size: 70rpx;
					font-weight: 700;
				}
			}

			.card-box-footer {
				font-size: 28rpx;
				color: #666;

				.footer-status {
					flex-direction: column;
					align-items: flex-start;

					.footer-status-view {
						@extend .t-flex;
						margin-right: 10rpx;
						width: 100%;
						justify-content: flex-start;
						padding: 6rpx 0;
						align-items: flex-start;

						.footer-status-text {
							color: #ff9000;
						}
					}
				}

				.footer-btn {
					button {
						height: 60rp;
						min-width: 140rpx;
						margin: 0 5rpx;
						border: none;
						background: #ff9000;
						border-radius: 80rpx;
						color: #fff;
						font-size: 26rpx;
					}

					.footer-btn-edit {
						background: #fff;
						border: 1px solid #ff9000;
						color: #ff9000;
					}
				}
			}
		}


	}

	image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 10px;
	}

	.sub {
		position: fixed;
		z-index: 800;
		background: #fff;
		height: 80rpx;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		bottom: var(--window-bottom);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		bottom: 0;
		/* #endif */
		/* padding: 10rpx 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); */
		padding: 20rpx 0;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

		button {
			height: 100%;
			margin: 0 10%;
			border: none;
			background: #ff9000;
			border-radius: 80rpx;
			color: #fff;
		}

	}
</style>
